<template>
    <div>
        <div class="one">浏览 ANGULAR 相关资源</div>
        <div class="one2"><span @click="whh('/Resources/KF','开发')" :class="{active:msg=='开发'}">开发</span> <span
                @click="whh('/Resources/KF','教育')" :class="{active:msg=='教育'}">教育</span><span
                @click="whh('/Resources/KF','社区')" :class="{active:msg=='社区'}">社区</span></div>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name: "Resources",
        data: () => {
            return {msg: "开发"}

        },
        created() {
            this.$router.push({path: '/Resources/KF', query: {id: '开发'}});
            console.log(this)
        },
        methods: {
            whh(a, b) {
                this.$router.push({path: a, query: {id: b}});
                this.msg = b
            }
        }
    }
</script>

<style scoped>
    .one {
        width: 100%;
        height: 50px;
        background-color: blue;
        padding: 20px;
        font-size: 20px;
        line-height: 50px;
        color: white;
        font-weight: bold;
    }

    .one2 {
        width: 30%;
        /*background-color: brown;*/
        margin: auto;
    }

    .one2 span {
        display: inline-block;
        width: 20%;
        /*color: darkslateblue;*/
        margin: 5%;
        text-align: center;
        /*font-size: 20px;*/

        height: 30px;
        line-height: 30px;
        /*background-color: darkslateblue;*/
        cursor: pointer;
    }

    .active {
        background-color: darkslateblue;
        color: white;
    }
</style>